<template>
	<view class="msg-list">

		<view class="msg-item" @tap="toSelectCommentTarget" v-if="!newEvaluate.toUserInfo.id">
			<view class="item-left">
				<text class="item-name">选择被评人</text>
				<view class="item-input input-placeholder">通过好友列表或手动输入的方式选择</view>
			</view>
			<view class="item-right">
				<image class="right-arrow-icon" src="../../static/rightTriangleArrow.png"></image>
			</view>
		</view>

		<view class="msg-item" @tap="toSelectCommentTarget" v-else>
			<view class="item-left">
				<view class="comment-target-msg">
					<text class="comment-target-name">{{newEvaluate.toUserInfo.nickName}}</text>
					<view class="comment-target-area">
						<image class="area-icon" src="../../static/locationIcon.png"></image>
						<text class="target-city">{{newEvaluate.toUserInfo.address || '--'}}</text>
					</view>
				</view>
				<view class="comment-target-comp">{{newEvaluate.toUserInfo.identityDesc || '--'}}</view>
				<view class="comment-target-comp">{{newEvaluate.toUserInfo.company || '--'}}·{{newEvaluate.toUserInfo.position || '--'}}
				</view>
			</view>
			<view class="item-right2">
				<image class="target-avatar"
					:src="getImgUrl(newEvaluate.toUserInfo.avatarUrl || newEvaluate.toUserInfo.avatar)"></image>
				<image class="right-arrow-icon" src="../../static/rightTriangleArrow.png"></image>
			</view>
		</view>



		<view class="msg-item" @tap="toSelectIdentityDesc"
			v-if="!newEvaluate.identityDesc && !newEvaluate.toUserInfo.identityDesc">
			<view class="item-left">
				<text class="item-name">专业</text>
				<view class="item-input input-placeholder">请选择被评人的专业</view>
			</view>
			<view class="item-right">
				<image class="right-arrow-icon" src="../../static/rightTriangleArrow.png"></image>
			</view>
		</view>


		<view class="msg-item" @tap="toSelectIdentityDesc"
			v-if="newEvaluate.identityDesc && !newEvaluate.toUserInfo.identityDesc">
			<view class="item-left">
				<text class="item-name">{{newEvaluate.identityDesc}}</text>
				<view class="item-input input-placeholder">点击更换</view>
			</view>
			<view class="item-right">
				<image class="right-arrow-icon" src="../../static/rightTriangleArrow.png"></image>
			</view>
		</view>


		<view class="msg-item" @tap="toInputComment" v-if="!newEvaluate.evaluateGrade">
			<view class="item-left">
				<text class="item-name">评价</text>
				<view class="item-input input-placeholder">请选择短评语</view>
			</view>
			<view class="item-right">
				<image class="right-arrow-icon" src="../../static/rightTriangleArrow.png"></image>
			</view>
		</view>

		<view class="msg-item" @tap="toInputComment" v-else>
			<view class="item-left">
				<text class="item-name">评价</text>
				<view class="comment-content">
					<image class="emoji-img" :src="getImgUrl(newEvaluate.evaluateIconId)"></image>
					<text class="comment-text">{{newEvaluate.evaluateGrade}}</text>
				</view>
				<view class="comment-detail-text" :class="{'hidden': !newEvaluate.evaluateDesc}"
					@tap.stop="showCommentContentPop">{{newEvaluate.evaluateDesc}}</view>
				<image class="right-arrow-icon" src="../../static/rightTriangleArrow.png"></image>
			</view>
		</view>

		<view class="msg-item" @tap="toSelectFriendsVisibleType">
			<view class="item-left">
				<view class="item-name">谁可以看<text class="sub-name"> (被评人必可见)</text></view>
				<view class="item-input input-placeholder" v-show="newEvaluate.toSeeType == 1">当前设置【所有好友可看】</view>
				<view class="item-input input-placeholder" v-show="newEvaluate.toSeeType == 2">当前设置【部分好友可看】</view>
				<view class="item-input input-placeholder" v-show="newEvaluate.toSeeType == 3">当前设置【部分好友不可看】</view>
			</view>
			<view class="item-right">
				<image class="right-arrow-icon" src="../../static/rightTriangleArrow.png"></image>
			</view>
		</view>


		<view class="submit-btn-wrap">
			<largeBtn @btnClk="confirm">发布</largeBtn>
		</view>

		<alertPop :title="'评语'" :content="newEvaluate.evaluateDesc" :btnText="'确定'" @maskClk="closeCommentContentPop"
			@btnClk="closeCommentContentPop" v-show="commentContentPopShow">
		</alertPop>
		
		<!-- 加好友提示弹窗 -->
		<confirmPop :title="'提示'" :content="confirmPopContent" :btns="confirmPopBtns" :subContent="confirmSubContent" @maskClk="closeConfrimPop" @btnClk="confrimPopBtnClk"
			v-show="confirmPopShow">
		</confirmPop>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				commentContentPopShow: false,
				confirmPopShow: false,
				confirmPopContent: '添加更多好友，让更多好友看到~',
				confirmSubContent: '（被评人将自动申请添加为好友）',
				visibleType: 1, // 1:所有好友可见 2：选中的朋友可见 3：选中的朋友不可见
				confirmPopBtns:[{
					text: '去添加',
					type: 'confirm'
				}, {
					text: '返回首页',
					type: 'cancel',
					bgColor:'#E5E5E5'
				}]
			}
		},
		computed: {
			...mapState(['newEvaluate', 'friendList']),
		},
		onLoad(options){
            this.delta = options.delta
			this.isLoading = false
		},
		methods: {
			toSelectCommentTarget() {
				// uni.navigateTo({
				// 	url: '/pages/userDetail/selectCommentTarget?type=1'
				// })
			},
			toSelectIdentityDesc() {
				uni.navigateTo({
					url: '/pages/userDetail/selectPosition?type=2'
				})
			},
			toInputComment() {
				uni.navigateTo({
					url: '/pages/userDetail/inputComment'
				})
			},
			toSelectFriendsVisibleType() {
				uni.navigateTo({
					url: '/pages/userDetail/selectFriendsVisibleType'
				})
			},
			showCommentContentPop() {
				this.commentContentPopShow = true
			},
			closeCommentContentPop() {
				this.commentContentPopShow = false
			},
			confirm() {
				const data = this.formatNewEvaluate()
				let errorMsg = ''
				
				if (!data.evaluateGrade) {
					errorMsg = '请选择评价内容'
				}	
				
				if (!data.identityDesc) {
					errorMsg = '请选择被评人专业'
				}
				
				if (!data.phone) {
					errorMsg = '请选择被评人'
				}
				
				if (errorMsg) {
					uni.showToast({
						title: errorMsg,
						icon: 'none'
					})
					return
				}
				if(this.isLoading) return
				this.isLoading = true

				this.$api.addEvaluate(data).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: 'none'
					})
					setTimeout(() => {
						// uni.navigateBack()
						this.isLoading = false
						this.showAddFirendsPop()
					}, 1500)
					
				}).catch(()=>{
					this.isLoading = false
				})
			},
            showAddFirendsPop(){
                this.confirmPopShow = true
            },
			confrimPopBtnClk(item = {}) {
				if (item.type === 'confirm') {
				    uni.navigateTo({
					    url: '/pages/myFriends/index'
				    })
				}
				if (item.type === 'cancel') {
				    uni.navigateBack({
				        delta: this.delta*1 || 4
				    })
					this.closeConfrimPop()
				}
			},
			closeConfrimPop() {
				this.confirmPopShow = false
			},
			
			formatNewEvaluate() {
				const newEvaluate = this.newEvaluate
				const result = {
					id:newEvaluate.id,
					toUserId: newEvaluate.toUserInfo.id == '007' ? 0 : newEvaluate.toUserInfo.id,
					toName: newEvaluate.toUserInfo.nickName,
					toAvatar: newEvaluate.toUserInfo.avatar,
					phone: newEvaluate.toUserInfo.phone,
					sex: newEvaluate.toUserInfo.sex,
					company: newEvaluate.toUserInfo.company,
					position: newEvaluate.toUserInfo.position,
					address: newEvaluate.toUserInfo.address,
					identityDesc: newEvaluate.toUserInfo.identityDesc || newEvaluate.identityDesc,
					evaluateGrade: newEvaluate.evaluateGrade,
					evaluateIcon: newEvaluate.evaluateIconId + '',
					evaluateDesc: newEvaluate.evaluateDesc
				}

				result.toSeeUsers = []
				result.toNotSeeUsers = []
				result.isPublic = true

				if (newEvaluate.toSeeType == 2) {
					result.toSeeUsers = newEvaluate.toSeeUsers.map((item) => {
						return {
							toSeeUserId: item
						}
					})
					result.toNotSeeUsers = this.friendList.filter((item) => {
						return newEvaluate.toSeeUsers.indexOf(item.userId) === -1
					}).map((item) => {
						return {
							toNotSeeUserId: item.userId
						}
					})
					result.isPublic = false
				}

				if (newEvaluate.toSeeType == 3) {
					result.toNotSeeUsers = newEvaluate.toNotSeeUsers.map((item) => {
						return {
							toNotSeeUserId: item
						}
					})
					result.toSeeUsers = this.friendList.filter((item) => {
						return newEvaluate.toNotSeeUsers.indexOf(item.userId) === -1
					}).map((item) => {
						return {
							toSeeUserId: item.userId
						}
					})
					result.isPublic = false
				}

				return result
			}
		}
	}
</script>

<style>
	page {
		background-color: #F3F7FD;
	}
</style>
<style lang="less">
	.msg-list {
		padding: 30rpx 40rpx;
		padding-bottom: 140rpx;

		.msg-item {
			background: #FFFFFF;
			box-shadow: 0 4rpx 8rpx 0 rgba(218, 227, 248, 0.5);
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			margin-bottom: 40rpx;

			.item-left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.item-name {
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
					line-height: 50rpx;
					margin-bottom: 20rpx;

					.sub-name {
						font-size: 30rpx;
					}
				}

				.item-input {
					font-size: 30rpx;
					font-weight: 400;
					color: #666;
					line-height: 44rpx;
					width: 500rpx;
				}

				.input-placeholder {
					color: #999;
				}
			}

			.item-right {
				min-height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.right-arrow-icon {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.item-right2 {
				display: flex;
				flex-direction: column;
				align-items: flex-end;

				.target-avatar {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
				}

				.right-arrow-icon {
					margin-top: 48rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}


		}
	}

	.submit-btn-wrap {
		position: fixed;
		z-index: 1;
		left: 40rpx;
		bottom: 48rpx;
		width: 670rpx;
	}



	.item-left {
		position: relative;

		.comment-target-msg {
			display: flex;
			align-items: flex-start;

			.comment-target-name {
				font-size: 48rpx;
				font-weight: 500;
				color: #333333;
				line-height: 66rpx;
				margin-right: 26rpx;
			}

			.comment-target-area {
				padding-top: 10rpx;
				display: flex;
				align-items: center;

				.area-icon {
					width: 24rpx;
					height: 24rpx;
				}

				.target-city {
					margin-left: 10rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
					line-height: 34rpx;
				}
			}
		}

		.comment-target-comp {
			font-size: 32rpx;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
			margin-top: 20rpx;
		}

		.comment-content {
			display: flex;
			align-items: center;

			.emoji-img {
				width: 46rpx;
				height: 46rpx;
			}

			.comment-text {
				font-size: 30rpx;
				color: #323746;
				line-height: 42rpx;
				margin-left: 18rpx;
			}
		}

		.comment-detail-text {
			margin-top: 26rpx;
			padding: 20rpx 24rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #323746;
			line-height: 36rpx;
			background-color: #F2F7FF;
			width: 560rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;

			&.hidden {
				visibility: hidden;
			}
		}

		.right-arrow-icon {
			position: absolute;
			right: 0;
			top: 50rpx;
			width: 32rpx;
			height: 32rpx;
		}

	}
</style>
